<script setup lang="ts">
import Request from '@/api/axios';
import dayjs from 'dayjs';
import { message } from 'ant-design-vue';
import { onMounted, ref } from 'vue';
const blogs = ref([])
onMounted(async () => {
    await Request.get({ url: '/blog/my-list' }).then(res => {
        blogs.value = res.info
    }).catch(err => {
        console.log(err)
    }).finally(() => {
        loading.value = false
    })
})
const loading = ref(true)
const searchText = ref('')

const columns = [
    {
        title: '标题',
        dataIndex: 'title',
        key: 'title',
        ellipsis: true,
        width: 300,
    },
    {
        title: '创建时间',
        dataIndex: 'created_at',
        key: 'created_at',
    }, {
        title: '更新时间',
        dataIndex: 'updated_at',
        key: 'updated_at',
    }, {
        title: '标签',
        dataIndex: 'tags',
        key: 'tags',
    }, {
        title: '操作',
        key: 'operation',
    }, {
        title: '私密',
        dataIndex: 'is_private',
        key: 'is_private',
    }
]

</script>
<template>
    <div class="blog-list">
        <a-table :dataSource="blogs" :columns="columns">
            <template #bodyCell="{ column, text, record }">
                <template v-if="column.dataIndex == 'title'">
                    <a-button type="link" @click="() => $router.push({ name: 'blog', params: { id: record.id } })">{{
                        text
                        }}</a-button>
                </template>
                <template v-if="column.dataIndex == 'created_at'">
                    <span>{{ dayjs(text).format('YYYY-MM-DD HH:mm:ss') }}</span>
                </template>
                <template v-if="column.dataIndex == 'tags'">
                    <div>
                        <a-tag v-for="(tag, index) in text" :key="index" color="#108ee9">{{ tag
                        }}</a-tag>
                    </div>
                </template>
                <template v-if="column.dataIndex == 'is_private'">
                    <a-switch v-model:checked="record.is_private" />
                </template>
                <template v-if="column.key == 'operation'">
                    <a-button type="link"
                        @click="() => $router.push({ name: 'blog-edit', params: { id: record.id } })">编辑</a-button>
                    <a-button type="link" @click="() => message.success('功能暂未开放')">删除</a-button>
                </template>
                <template v-if="column.dataIndex == 'updated_at'">
                    <span>{{ dayjs(text).format('YYYY-MM-DD HH:mm:ss') }}</span>
                </template>
            </template>
        </a-table>
    </div>
</template>